/* eslint-disable react/prop-types */
import { useState,useEffect } from 'react';
import {Modal ,Button,Input,Select,Upload} from 'antd'
import dayjs from 'dayjs'
  
// 解构props showEditStaff 是否显示打开，staff被编辑的用户信息，onOk确定回调，onCancel取消回调
function EditStaff({showEditStaff,staff,onOk,onCancel,options}) {
  // 把传入的staff作为当前staffData的默认值
  const [staffData,setStaffData] = useState(staff);
  // 监听staff变化，更新staffData的值（使用dayjs格式文本）
  useEffect(()=>{
    // 格式日期
    setStaffData({...staff,lastTime:dayjs(staff.lastTime).format("YYYY-MM-DD HH:mm:ss")})
    
  },[staff])
  // 上传开始
  const handleChange = (info) => {
    if (info.file.status === 'done') {
      // Get this url from response in real world.
       console.log(info,"info")
       setStaffData({...staffData,avatar:'http://dida100.com:8889'+info.file.response.file.path})
    }
  };
   // 上传开始ed
  return (<Modal title="修改添加员工信息" 
  footer={null}
  open={showEditStaff} 
  onCancel={onCancel}>
       <div>
          
          账号：<Input value={staffData.id}  disabled/> <br />
          真实姓名:<Input value={staffData.name} onChange={e=>setStaffData({...staffData,name:e.target.value})}/>
          密码:<Input value={staffData.password} onChange={e=>setStaffData({...staffData,password:e.target.value})}/>
          角色：
      <Select 
      style={{width:200}}
      value={staffData.user_group}
      options={options}
      defaultValue={staffData.user_group} 
      allowClear
      onChange={e=>{
        setStaffData({...staffData,user_group:e})}}
      ></Select>
      图像：
      <Upload
        name="file"
        listType="picture-card"
        showUploadList={false}
        action="http://dida100.com:8889/api/upload"
        onChange={handleChange}
      >
        <span>
        {staffData.avatar ? <img src={staffData.avatar} alt="avatar" style={{ width: '100%' }} /> : <Button>上传</Button>}
        </span>
      </Upload>
       </div>
  <Button 
  type='primary'
  onClick={()=>{
    onOk(staffData)    
  }}>确定</Button>
      </Modal> );
}

export default EditStaff;